import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
import { MessageService } from '@iux/live';

@Component({
  templateUrl: './customize.component.html',
  styles: [
    `
      .ui-message-action.lv-link {
        display: block !important;
        margin: 8px 0 0;
        text-align: right;
      }
    `,
  ],
})
export class CustomizeComponent {
  @ViewChild('contentTpl1', { static: false }) contentTpl1: TemplateRef<any>;
  @ViewChild('errorTpl', { static: false }) errorTpl: TemplateRef<any>;
  @ViewChild('infoTpl', { static: false }) infoTpl: TemplateRef<any>;
  constructor(private message: MessageService) {}

  simple() {
    this.message.info(this.contentTpl1, {
      lvDuration: 0,
      lvOnDestroy: () => {
        console.log('手动关闭');
      },
    });
  }

  error() {
    this.message.create({
      lvType: 'error',
      lvTitle: 'Backup task failed',
      lvContent: this.errorTpl,
      lvShowCloseButton: true,
      lvWidth: '20%',
      lvOnDestroy: () => {
        console.log('延迟关闭');
      },
      lvOnShow: () => {
        console.log(document.querySelector('#error'));
      },
    });
  }

  info() {
    this.message.create({
      lvType: 'info',
      lvTitle: 'Authentication requirement',
      lvContent: this.infoTpl,
      lvShowCloseButton: true,
      lvWidth: '20%',
    });
  }
}
